// 搜索框交互
const searchInput = document.querySelector(".search-box input");
const searchButton = document.querySelector(".search-box button");

searchButton.addEventListener("click", () => {
  const searchTerm = searchInput.value.trim();
  if (searchTerm) {
    // 执行搜索逻辑
    console.log(`搜索关键词: ${searchTerm}`);
  }
});

// 页面加载时读取 localStorage 中的用户名
document.addEventListener("DOMContentLoaded", function () {
  const usernameElement = document.getElementById("username");

  // 从 localStorage 获取存储的用户名
  const username = localStorage.getItem("username");

  // 如果有用户名，更新 span 内容
  if (username) {
    usernameElement.textContent = username;
  }
});

// JSON data
const data = {
  jobCategories: [
    {
      category: "互联网/AI",
      jobs: ["前端开发工程师", "UE4", "技术美术", "JAVA", "c++", "c#", ".NET"],
    },
    {
      category: "产品",
      jobs: ["产品经理", "产品助理", "金融产品经理", "用户研究", "化妆品产品经理"],
    },
    {
      category: "客服运营",
      jobs: ["客服专员", "客服主管", "客服经理", "运营经理", "淘宝运营"],
    },
    {
      category: "销售",
      jobs: ["销售专员", "电话销售", "网络销售", "销售总监", "销售VP", "汽车销售"],
    },
    // {
    //   category: "人力/行政/法务",
    //   jobs: ["人力资源专员/助理", "档案助理", "行政总监", "前台", "后勤"],
    // },
  ],
  images: ["./imgs/job.png", "./imgs/job.png"],
};

// Function to render job categories and images
// function renderContent() {
//   const container = document.getElementById("job-list-container");

//   // Render job categories
//   const jobListDiv = document.createElement("div");
//   jobListDiv.classList.add("sjob-list");

//   data.jobCategories.forEach(category => {
//     const jobBox = document.createElement("div");
//     jobBox.classList.add("job-box");

//     const categoryTitle = document.createElement("p");
//     categoryTitle.textContent = category.category;
//     jobBox.appendChild(categoryTitle);

//     category.jobs.forEach(job => {
//       const jobItem = document.createElement("p");
//       jobItem.textContent = job;
//       jobBox.appendChild(jobItem);
//     });

//     jobListDiv.appendChild(jobBox);
//   });

//   container.appendChild(jobListDiv);

//   // Render images
//   const imageContainer = document.createElement("div");
//   imageContainer.classList.add("image-container");

//   data.images.forEach(src => {
//     const img = document.createElement("img");
//     img.src = src;
//     img.alt = "Job Image";
//     imageContainer.appendChild(img);
//   });

//   container.appendChild(imageContainer);
// }

// // Call the render function to display the content
// renderContent();

// JSON 数据
const jobData = {
  jobList: [
    {
      jobTitle: "软件测试员",
      salary: "200-350元/天",
      education: "本科及以上",
      company: "新锐科技有限公司",
      location: "大连 开发区",
      locationInfo: "大连 开发区 开发路",
    },
    {
      jobTitle: "文案编辑",
      salary: "120-200元/天",
      education: "大专及以上",
      company: "博创传媒有限公司",
      location: "大连 西岗区",
      locationInfo: "大连 西岗区 人民路",
    },
    {
      jobTitle: "在线教师",
      salary: "200-400元/天",
      education: "本科及以上",
      company: "未来教育有限公司",
      location: "大连 中山区",
      locationInfo: "大连 中山区 教育路",
    },
    {
      jobTitle: "物流管理员",
      salary: "100-180元/天",
      education: "高中及以上",
      company: "顺达物流有限公司",
      location: "大连 甘井子区",
      locationInfo: "大连 甘井子区 甘井子街",
    },
    {
      jobTitle: "客服专员",
      salary: "150-250元/天",
      education: "大专及以上",
      company: "鼎盛客服中心",
      location: "大连 金州区",
      locationInfo: "大连 金州区 东北路",
    },
    {
      jobTitle: "兼职翻译",
      salary: "300-500元/天",
      education: "本科及以上",
      company: "环球翻译服务有限公司",
      location: "大连 高新技术区",
      locationInfo: "大连 高新技术区 翻译园",
    },
    {
      jobTitle: "市场调研员",
      salary: "100-200元/天",
      education: "高中及以上",
      company: "智达调查公司",
      location: "大连 开发区",
      locationInfo: "大连 开发区 商务中心",
    },
    {
      jobTitle: "内容审核员",
      salary: "150-300元/天",
      education: "大专及以上",
      company: "阳光数据科技有限公司",
      location: "大连 中山区",
      locationInfo: "大连 中山区 审核街",
    },
    {
      jobTitle: "兼职模特",
      salary: "200-500元/天",
      education: "学历不限",
      company: "耀世模特公司",
      location: "大连 沙河口区",
      locationInfo: "大连 沙河口区 模特街",
    },
    {
      jobTitle: "电商客服",
      salary: "100-200元/天",
      education: "大专及以上",
      company: "大连迅捷电商有限公司",
      location: "大连 西岗区",
      locationInfo: "大连 西岗区 电子商务路",
    },
    {
      jobTitle: "短视频剪辑师",
      salary: "200-400元/天",
      education: "大专及以上",
      company: "光影传媒有限公司",
      location: "大连 高新技术区",
      locationInfo: "大连 高新技术区 影视大道",
    },
    {
      jobTitle: "仓库管理员",
      salary: "120-180元/天",
      education: "高中及以上",
      company: "安信物流有限公司",
      location: "大连 甘井子区",
      locationInfo: "大连 甘井子区 仓储街",
    },
    {
      jobTitle: "网络安全员",
      salary: "300-600元/天",
      education: "本科及以上",
      company: "盾安科技有限公司",
      location: "大连 开发区",
      locationInfo: "大连 开发区 安全路",
    },
    {
      jobTitle: "活动策划专员",
      salary: "150-300元/天",
      education: "大专及以上",
      company: "创意无限文化有限公司",
      location: "大连 中山区",
      locationInfo: "大连 中山区 创意街",
    },
    {
      jobTitle: "摄影助理",
      salary: "100-200元/天",
      education: "学历不限",
      company: "聚焦摄影工作室",
      location: "大连 沙河口区",
      locationInfo: "大连 沙河口区 摄影大道",
    },
  ],
};

// 渲染职位列表
const jobListElement = document.getElementById("job-list");

jobData.jobList.forEach(job => {
  const jobListing = document.createElement("div");
  jobListing.classList.add("job-listing");

  const jobInfo = document.createElement("div");
  jobInfo.classList.add("job-info");
  jobInfo.innerHTML = `
        <h3 class="job-title" class="job-title">${job.jobTitle}</h3>
        <p class="salary" class="salary">${job.salary}</p>
        <p class="education" class="education>${job.education}</p>
        <p class="company" class="company">${job.company}</p>
      `;

  const locationInfo = document.createElement("div");
  locationInfo.classList.add("location-info");
  locationInfo.innerHTML = `<p>${job.location}`;

  jobListing.appendChild(jobInfo);
  jobListing.appendChild(locationInfo);
  jobListElement.appendChild(jobListing);
});

function showPopup(box) {
  const popup = box.querySelector(".popup");
  popup.style.opacity = "1";
  popup.style.visibility = "visible";
}

function hidePopup(box) {
  const popup = box.querySelector(".popup");
  popup.style.opacity = "0";
  popup.style.visibility = "hidden";
}
